<template>
	<view
		:style="'height:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+offset)+'rpx;position:fixed;top:0;'+bgType"
		class="custom">
		<view class="block custom-block"
			:style="'height:'+(custom.navHeight)+'rpx;width:100%;margin-top:'+(custom.statusBar+custom.nvaMartom)+'rpx;'">
			<view v-if="isBack" @click="backup()" :style="'color:'+color" class="iconfont icon-fanhui backup-btn">
			</view>
			<view @click="navigate('/page_other/area/choose')" class="area" v-if="isArea">{{area.text}}
				<view class="iconfont icon-daosanjiao"></view>
			</view>
			<view style="height:100%" :style="'color:'+color" class="title">{{title}}</view>
			<view class="area" style="visibility: hidden;" v-if="isArea">{{area.text}}
				<view class="iconfont icon-daosanjiao"></view>
			</view>
			<view v-if="isBack" style="visibility: hidden;" class="iconfont icon-fanhui backup-btn"></view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomNavData
	} from '@/util/util.js';
	import {
		getStorage
	} from '@/util/auth'
	import config from '@/config.js'
	export default {
		name: 'CustomNav',
		props: {
			isBack: Boolean,
			isArea: Boolean,
			title: {
				type: String,
				default: '酒泉码上就业',
			},
			color: {
				type: String,
				default: '#fff'
			},
			topBgColors: {
				type: String,
				default: 'rgba(0,0,0,0)'
			}
		},
		computed: {
			bgType() {
				const str = this.topBgColors.slice(0, 1);
				return str == '#' || str == 'r' ? `background:${this.topBgColors}` : `background-image:${this.topBgColors}`
			}
		},
		data() {
			return {
				offset: 0,
				custom: {
					statusBar: 0,
					nvaMartom: 0,
					navHeight: 80,
				},
				area: getStorage('area')
			}
		},
		methods: {
			backup() {
				uni.navigateBack({
					fail() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			}
		},
		mounted() {
			this.custom = getCustomNavData()
			this.offset = 20
			uni.$on('areaChange', (data) => {
				this.area = data;
			})
		}
	}
</script>

<style lang="scss" scoped>
	.custom {
		z-index: 999999;
		width: 100%;
		transition: all .3s ease;

		.custom-block {
			display: flex;
			align-items: center;

			.area {
				display: flex;
				align-items: center;
				color: #fff;
				font-size: 28rpx;
				margin: 0 30rpx;
				font-weight: bold;

				.iconfont {
					font-weight: normal;
					font-size: 24rpx;
					margin-left: 16rpx;
				}
			}

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 20rpx;
				flex-grow: 1;
				transition: all .3s ease;
			}

			.iconfont.backup-btn {
				display: flex;
				align-items: center;
				flex-grow: 0;
				margin-left: 20rpx;
				color: #fff;
				font-size: 36rpx;
				transition: all .3s ease;
			}
		}
	}
</style>